<template>
  <el-container class="container">
    <el-header height="50px" class="tool-bar">
      <header-select :level="2" @selectBuilding="buildingChangeHandle" />
      <el-cascader
        v-model="processSelected"
        :options="realProcessData"
        :props="props"
        :collapse-tags="true"
        :show-all-levels="false"
        size="small"
        placeholder="请选择工序"
        style="margin-left: 20px; width: 400px"
        popper-class="selectProcessPlane"
        @change="processChangeHandle"
      />
      <el-button size="small" type="primary" style="margin-left: 20px" @click="queryContentDataBySelectProcess">查询</el-button>
      <el-button size="small" type="primary" style="margin-left: 20px" @click="resetSelectProcess">重置</el-button>
      <el-checkbox v-model="showOld" style="margin-left: 20px" size=" small">显示旧工序</el-checkbox>
      <el-checkbox v-model="showApproved" style="margin-left: 20px" size=" small">显示已验收</el-checkbox>
      <!--      <process-select :visible.sync="showSelectProcessDialog" :building-id="buildingId"></process-select>-->
    </el-header>
    <el-container class="data-container">
      <el-header class="building-info">
        <el-row style="width: 100%;">
          <el-col :span="6" class="building-info-field">
            <span class="field-title">竣工节点：</span>
            <span class="field-value">{{ buildingPlan.completionNode }}</span>
          </el-col>
          <el-col :span="6" class="building-info-field">
            <span class="field-title">达售节点：</span>
            <span class="field-value">{{ buildingPlan.preSellNode }}</span>
          </el-col>
          <el-col :span="6" class="building-info-field">
            <span class="field-title">正负零节点：</span>
            <span class="field-value">{{ buildingPlan.plusMinusZeroNode }}</span>
          </el-col>
          <el-col :span="6" class="building-info-field">
            <span class="field-title">达售楼层：</span>
            <span class="field-value">{{ buildingPlan.sellFloor }}</span>
          </el-col>
        </el-row>
      </el-header>
      <el-container v-loading="loading" class="building-content">
        <el-header style="height: 60px;">
          <el-row style="height: 50%">
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #80c9b5" />
              <div class="legend-label">验收通过</div>
            </el-col>
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #eb9494" />
              <div class="legend-label">验收不通过</div>
            </el-col>
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #cccc98" />
              <div class="legend-label">待验收</div>
            </el-col>
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #ccc" />
              <div class="legend-label">未报验</div>
            </el-col>
          </el-row>
          <el-row style="height: 50%">
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #64aeec">总</div>
              <div class="legend-label" :class="{'active-legend': activeRoleCode === 'FDCGC_ZB11A'}" style="margin-right: 15px; cursor: pointer" @click="roleLegendClickHandle('FDCGC_ZB11A')">项目总</div>
            </el-col>
            <el-col :span="6" class="legend" style="cursor: pointer">
              <div class="legend-block" style="background-color: #64aeec">工</div>
              <div
                class="legend-label"
                :class="{'active-legend': activeRoleCode === 'FDC_GCXT_ROLE_007'}"
                style="margin-right: 28px;cursor: pointer"
                @click="roleLegendClickHandle('FDC_GCXT_ROLE_007')"
              >工程师</div>
            </el-col>
            <el-col :span="6" class="legend">
              <div class="legend-block" style="background-color: #64aeec">监</div>
              <div
                class="legend-label"
                :class="{'active-legend': activeRoleCode === 'FDC_GCXT_ROLE_005'}"
                style="margin-right: 15px; cursor: pointer"
                @click="roleLegendClickHandle('FDC_GCXT_ROLE_005')"
              >监理</div>
            </el-col>
            <el-col :span="6" class="legend">
              <div class="legend-label" style="color: red">注:红色字体表示未及时验收</div>
            </el-col>
          </el-row>
        </el-header>
        <!-- 工序整体情况 -->
        <el-main class="building-content-plane">
          <el-container>
            <el-aside width="80px" class="plane-left">
              <div v-show="!activeRoleCode || activeRoleCode === 'FDC_GCXT_ROLE_005'" class="left-row">
                <div class="role-sign">监</div>
              </div>
              <div v-show="!activeRoleCode || activeRoleCode === 'FDC_GCXT_ROLE_007'" class="left-row">
                <div class="role-sign">工</div>
              </div>
              <div v-show="!activeRoleCode || activeRoleCode === 'FDCGC_ZB11A'" class="left-row">
                <div class="role-sign">总</div>
              </div>
              <div v-for="(floor, floorIndex) in floors" :key="'floor' + floorIndex" class="left-row">
                <div class="floor-left">{{ floor }}层</div>
                <div class="floor-right" />
              </div>
            </el-aside>
            <el-main class="plane-right">
              <div
                v-for="(buildingView, buildingViewIndex) in buildingViews"
                v-show="!showApproved || buildingView.hasRecord"
                :key="'buildingView' + buildingViewIndex"
                :style="{ width: (buildingView.unitType === 2 ? buildingView.table[0].length * 94 : 134) + 'px' }"
                class="plane-right-column"
              >
                <div v-show="!activeRoleCode || activeRoleCode === 'FDC_GCXT_ROLE_005'" class="right-column-cell">
                  <div v-if="buildingView.ratio['FDC_GCXT_ROLE_005']" class="progress-bar" :style="{ cursor: buildingView.ratio['FDC_GCXT_ROLE_005'].measure !== 0 ? 'pointer' : '' }" @click="showDetailDialog(buildingView)">
                    <div
                      class="progress-bar_line"
                      :style="{ width: buildingView.ratio['FDC_GCXT_ROLE_005'].realRatio + '%', backgroundColor: buildingView.ratio['FDC_GCXT_ROLE_005'].acceptanceCount >= buildingView.ratio['FDC_GCXT_ROLE_005'].measure ? '#80c9b5' : '#EB9494'}"
                    />
                    <div v-if="buildingView.ratio['FDC_GCXT_ROLE_005'].measure !== 0" class="progress-placeholder">
                      {{ buildingView.ratio['FDC_GCXT_ROLE_005'].acceptanceCount }}/{{ buildingView.ratio['FDC_GCXT_ROLE_005'].measure }}/{{ buildingView.ratio['FDC_GCXT_ROLE_005'].inspectionCount }}
                    </div>
                  </div>
                  <div v-else class="progress-bar" />
                </div>
                <div v-show="!activeRoleCode || activeRoleCode === 'FDC_GCXT_ROLE_007'" class="right-column-cell">
                  <div v-if="buildingView.ratio['FDC_GCXT_ROLE_007']" class="progress-bar" :style="{ cursor: buildingView.ratio['FDC_GCXT_ROLE_007'].measure !== 0 ? 'pointer' : '' }" @click="showDetailDialog(buildingView)">
                    <div
                      class="progress-bar_line"
                      :style="{ width: buildingView.ratio['FDC_GCXT_ROLE_007'].realRatio + '%', backgroundColor: buildingView.ratio['FDC_GCXT_ROLE_007'].acceptanceCount >= buildingView.ratio['FDC_GCXT_ROLE_007'].measure ? '#80c9b5' : '#EB9494'}"
                    />
                    <div v-if="buildingView.ratio['FDC_GCXT_ROLE_007'].measure !== 0" class="progress-placeholder">
                      {{ buildingView.ratio['FDC_GCXT_ROLE_007'].acceptanceCount }}/{{ buildingView.ratio['FDC_GCXT_ROLE_007'].measure }}/{{ buildingView.ratio['FDC_GCXT_ROLE_007'].inspectionCount }}
                    </div>
                  </div>
                  <div v-else class="progress-bar" />
                </div>
                <div v-show="!activeRoleCode || activeRoleCode === 'FDCGC_ZB11A'" class="right-column-cell">
                  <div v-if="buildingView.ratio['FDCGC_ZB11A']" class="progress-bar" :style="{ cursor: buildingView.ratio['FDCGC_ZB11A'].measure !== 0 ? 'pointer' : '' }" @click="showDetailDialog(buildingView)">
                    <div
                      class="progress-bar_line"
                      :style="{ width: buildingView.ratio['FDCGC_ZB11A'].realRatio + '%', backgroundColor: buildingView.ratio['FDCGC_ZB11A'].acceptanceCount >= buildingView.ratio['FDCGC_ZB11A'].measure ? '#80c9b5' : '#EB9494'}"
                    />
                    <div v-if="buildingView.ratio['FDCGC_ZB11A'].measure !== 0" class="progress-placeholder">
                      {{ buildingView.ratio['FDCGC_ZB11A'].acceptanceCount }}/{{ buildingView.ratio['FDCGC_ZB11A'].measure }}/{{ buildingView.ratio['FDCGC_ZB11A'].inspectionCount }}
                    </div>
                  </div>
                  <div v-else class="progress-bar" />
                </div>
                <building-plane
                  :key="'buildingView' + buildingViewIndex"
                  :active-role-code="activeRoleCode"
                  :data="buildingView.table"
                  :cell-width="buildingView.unitType === 2 ? 90 : 130"
                  :cell-height="28"
                  :fixed-width="true"
                  :fixed-height="fixHeightUnitType.indexOf(buildingView.unitType) === -1"
                  :extend-params="{ checkTableId: buildingView.checkTableId }"
                  :style="{ height: floors.length > 0 ? floors.length * 32 + 'px' : '32px' }"
                  @cellClick="buildingCellClickHandler"
                />
                <div class="right-column-label">
                  {{ buildingView.checkTypeName }}-{{ buildingView.checkTableName }}
                </div>
              </div>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="30%"
      :show-close="false"
      custom-class="customDialogClass"
      :closed="dialogClose"
    >
      <el-container>
        <el-header style="border-bottom: 1px solid #ccc">
          <el-row style="height: 50%">
            <el-col :span="12">分部分项</el-col>
            <el-col :span="12" style="text-align: right">{{ detailForm.checkTypeName }}</el-col>
          </el-row>
          <el-row style="height: 50%">
            <el-col :span="12">工序</el-col>
            <el-col :span="12" style="text-align: right">{{ detailForm.checkTableName }}</el-col>
          </el-row>
        </el-header>
        <el-main style="padding: 0; overflow: hidden;">
          <div v-if="detailForm.tableData" class="container-table">
            <div class="table-row">
              <div class="table-cell" />
              <div class="table-cell">已验收</div>
              <div class="table-cell">按比例应验</div>
              <div class="table-cell">施工完成</div>
            </div>
            <div class="table-row">
              <div class="table-cell">
                <div class="ratio-role-name">监</div>
              </div>
              <template v-if="detailForm.tableData['FDC_GCXT_ROLE_005'] && detailForm.tableData['FDC_GCXT_ROLE_005'] !== 0">
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_005'].acceptanceCount + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_005'].measure + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_005'].inspectionCount + detailForm.unit }}</div>
              </template>
              <template v-else>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
              </template>
            </div>
            <div class="table-row">
              <div class="table-cell">
                <div class="ratio-role-name">工</div>
              </div>
              <template v-if="detailForm.tableData['FDC_GCXT_ROLE_007'] && detailForm.tableData['FDC_GCXT_ROLE_007'] !== 0">
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_007'].acceptanceCount + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_007'].measure + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDC_GCXT_ROLE_007'].inspectionCount + detailForm.unit }}</div>
              </template>
              <template v-else>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
              </template>
            </div>
            <div class="table-row">
              <div class="table-cell">
                <div class="ratio-role-name">总</div>
              </div>
              <template v-if="detailForm.tableData['FDCGC_ZB11A'] && detailForm.tableData['FDCGC_ZB11A'] !== 0">
                <div class="table-cell">{{ detailForm.tableData['FDCGC_ZB11A'].acceptanceCount + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDCGC_ZB11A'].measure + detailForm.unit }}</div>
                <div class="table-cell">{{ detailForm.tableData['FDCGC_ZB11A'].inspectionCount + detailForm.unit }}</div>
              </template>
              <template v-else>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
                <div class="table-cell">-</div>
              </template>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-dialog>
    <!-- 基础工程工序 -->
    <el-dialog
      title="工序报验验收详情"
      :close-on-click-modal="false"
      :visible.sync="beState.visible"
    >
      <div v-loading="beState.loading" class="building-content" style="border: none;">
        <el-row :gutter="20">
          <el-col
            v-if="beState.checkTable
              && beState.checkTable.cfunittype === 4
              && beState.plans.length"
            :span="6"
          >
            <el-carousel class="pile-plan" height="200px" indicator-position="none">
              <el-carousel-item v-for="(item, i) in beState.plans" :key="i">
                <el-image class="pile-img" :src="basePicUrl + item.fileId" :preview-src-list="showBigPic(item.fileId)" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="18">
            <el-row style="height: 50%">
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #80c9b5" />
                <div
                  class="legend-label"
                  style="margin-right: 15px; cursor: pointer"
                  :class="{'active-legend': beState.activeCheckState === 10}"
                  @click="changeCheckState(10)"
                >验收通过</div>
              </el-col>
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #eb9494" />
                <div
                  class="legend-label"
                  style="margin-right: 15px; cursor: pointer"
                  :class="{'active-legend': beState.activeCheckState === 11}"
                  @click="changeCheckState(11)"
                >验收不通过</div>
              </el-col>
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #cccc98" />
                <div
                  class="legend-label"
                  style="margin-right: 15px; cursor: pointer"
                  :class="{'active-legend': beState.activeCheckState === -1}"
                  @click="changeCheckState(-1)"
                >待验收</div>
              </el-col>
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #ccc" />
                <div
                  class="legend-label"
                  style="margin-right: 15px; cursor: pointer"
                  :class="{'active-legend': beState.activeCheckState === 0}"
                  @click="changeCheckState(0)"
                >未报验</div>
              </el-col>
            </el-row>
            <el-row style="height: 50%">
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #64aeec">总</div>
                <div
                  class="legend-label"
                  :class="{'active-legend': beState.activeRoleCode === 'FDCGC_ZB11A'}"
                  style="margin-right: 15px; cursor: pointer"
                  @click="changeRole('FDCGC_ZB11A')"
                >项目总</div>
              </el-col>
              <el-col :span="6" class="legend content-left" style="cursor: pointer">
                <div class="legend-block" style="background-color: #64aeec">工</div>
                <div
                  class="legend-label"
                  :class="{'active-legend': beState.activeRoleCode === 'FDC_GCXT_ROLE_007'}"
                  style="margin-right: 28px;cursor: pointer"
                  @click="changeRole('FDC_GCXT_ROLE_007')"
                >工程师</div>
              </el-col>
              <el-col :span="6" class="legend content-left">
                <div class="legend-block" style="background-color: #64aeec">监</div>
                <div
                  class="legend-label"
                  :class="{'active-legend': beState.activeRoleCode === 'FDC_GCXT_ROLE_005'}"
                  style="margin-right: 15px; cursor: pointer"
                  @click="changeRole('FDC_GCXT_ROLE_005')"
                >监理</div>
              </el-col>
              <!--            <el-col :span="6" class="legend content-left">-->
              <!--              <div class="legend-label" style="color: red">注:红色字体表示未及时验收</div>-->
              <!--            </el-col>-->
            </el-row>
          </el-col>
        </el-row>
        <!-- 基础工程内容 -->
        <div v-if="beState.checkTable && beState.checkTable.cfunittype === 4">
          <el-row :gutter="10">
            <el-col
              v-for="(item, i) in filterPileData.slice((beState.pageNum - 1) * beState.pageSize, beState.pageNum * beState.pageSize)"
              :key="i"
              :span="6"
            >
              <p
                class="pile-item"
                :style="{background: colorLib[beState.activeRoleCode ? item.roleResult[beState.activeRoleCode] || 0 : item.status]}"
                @click="getInspectDetail({objectId: item.objectId, batch: item.batch})"
              >
                <span>{{ item.name }}</span>
                <em> 第 {{ item.batch }} 批 </em>
              </p>
            </el-col>
          </el-row>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="beState.pageNum"
            :page-size="beState.pageSize"
            :total="filterPileData.length"
            @current-change="handlePileChange"
          />
        </div>
        <div v-else-if="beState.checkTable && beState.checkTable.cfunittype === 5">
          <el-carousel indicator-position="outside" height="500px" :autoplay="false">
            <el-carousel-item v-for="(item, i) in beState.content" :key="i" style="text-align: center">
              <line-draw-plane
                :file-id="item.fileId"
                :line-arr="item.lineArr"
                :click-call-back="getInspectDetail"
                :role-key="beState.activeRoleCode"
                :status="beState.activeCheckState"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else-if="beState.checkTable && beState.checkTable.cfunittype === 6" class="wall-plane">
          <div class="wall-plane-main">
            <div v-for="(item, index) in beState.content" :key="index" class="plane-content-block">
              <div v-if="item.length > 0" class="block-wrapper">
                <div
                  v-for="(item1, index1) in item"
                  v-show="beState.activeCheckState === undefined || beState.activeCheckState === (beState.activeRoleCode ? item1.roleResult[beState.activeRoleCode] || 0 : item1.status)"
                  :key="index1"
                  class="block-item"
                  :style="{ backgroundColor: colorLib[beState.activeRoleCode ? item1.roleResult[beState.activeRoleCode] || 0 : item1.status] }"
                  @click="getInspectDetail(item1)"
                >
                  <span>{{ item1.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="wall-plane-bottom">
            <div class="plane-item-label">东</div>
            <div class="plane-item-label">南</div>
            <div class="plane-item-label">西</div>
            <div class="plane-item-label">北</div>
          </div>
        </div>
        <div v-if="beState.checkTable && beState.checkTable.cfunittype === 7">
          <el-row :gutter="10">
            <el-col
              v-for="(item, i) in beState.content"
              v-show="beState.activeCheckState === undefined || beState.activeCheckState === (beState.activeRoleCode ? item.roleResult[beState.activeRoleCode] || 0 : item.status)"
              :key="i"
              :span="12"
            >
              <p class="pile-item" :style="{background: colorLib[beState.activeRoleCode ? item.roleResult[beState.activeRoleCode] || 0 : item.status]}" @click="getInspectDetail(item)">
                <span>第 {{ item.batch }} 批</span>
              </p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import HeaderSelect from '../components/HeaderSelect'
import BuildingPlane from '../components/BuildingPlane'
import LineDrawPlane from '../../qualityManage/components/LineDrawPlane'
import { getBuildingView, getBuildingPlan, getSpecialType, getBuildingBeState } from '@/api/statement/processSchedule'
export default {
  name: 'BuildingView',
  components: {
    HeaderSelect,
    BuildingPlane,
    LineDrawPlane
  },
  data() {
    return {
      fixHeightUnitType: [3, 4, 5, 6, 7],
      buildingId: '',
      loading: false,
      buildingPlan: {},
      buildingViews: [],
      floors: [],
      roleKeyMap: { 'FDC_GCXT_ROLE_007': '工', 'FDC_GCXT_ROLE_005': '监', 'FDCGC_ZB11A': '总' },
      detailDialogVisible: false,
      activeRoleCode: '',
      showSelectProcessDialog: false,
      processData: [],
      processSelected: [],
      props: { multiple: true },
      showOld: false,
      showApproved: false,
      detailForm: {},
      basePicUrl: process.env.VUE_APP_BASE_API + '/file/download?fileKey=',
      /* 基础工程 另类实现 */
      beState: {
        visible: false,
        loading: false,
        activeRoleCode: undefined,
        activeCheckState: undefined,
        pageNum: 1,
        pageSize: 40,
        checkTable: {},
        allPileArr: [],
        pileArr: [],
        plans: [],
        content: [],
        pagePileArr: [],
        paramData: {}
      },
      /* 颜色 */
      colorLib: { 10: '#80C9B5', 11: '#EB9494', '-1': '#CCCC98', 0: '#CCC' }
    }
  },
  computed: {
    filterPileData() {
      const beState = this.beState
      if (!beState.checkTable && beState.checkTable.cfunittype !== 4) {
        return []
      }
      return beState.content.filter(item => beState.activeCheckState === undefined || beState.activeCheckState === (beState.activeRoleCode ? item.roleResult[beState.activeRoleCode] || 0 : item.status))
    },
    realProcessData() {
      const { processData, showOld } = this
      if (showOld) {
        return processData
      }
      return processData.filter(item => !item.old).map(item => {
        const data = JSON.parse(JSON.stringify(item))
        data.children = (data.children || []).filter(item1 => !item1.old)
        return data
      })
    }
  },
  watch: {
    '$route.query.buildingId'(val) {
      if (val) {
        this.buildingId = val
        const processIds = []
        this.processSelected.forEach(item => {
          processIds.push(item[item.length - 1])
        })
        this.getContentData(val, processIds)
        this.getBuildingPlan(val)
        this.queryProcess(val)
      }
    }
  },
  created() {
    const buildingId = this.$route.query.buildingId
    this.buildingId = buildingId
    this.getContentData(buildingId)
    this.getBuildingPlan(buildingId)
    this.queryProcess(buildingId)
  },
  methods: {
    /**
     * 楼栋选择事件处理
     * @param buildingId 楼栋ID
     */
    buildingChangeHandle(buildingId) {
      // this.buildingId = buildingId
      // this.getContentData(buildingId)
      // this.queryProcess(buildingId)
    },
    /**
     * 查询楼栋视图数据
     * @param buildingId 楼栋ID
     * @param processIds 工序Ids
     * @param roleKey 角色key
     */
    getContentData(buildingId, processIds = []) {
      if (!buildingId || this.loading) {
        return
      }
      this.loading = true
      getBuildingView({ buildingId: buildingId, checkTableId: processIds.join(','), old: this.showOld }).then(res => {
        const data = res.data
        this.buildingViews = data.content || []
        this.floors = data.floor || []
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 查询楼栋计划
     * @param buildingId 楼栋ID
     */
    getBuildingPlan(buildingId) {
      if (!buildingId) {
        return
      }
      getBuildingPlan({ buildingId: buildingId }).then(res => {
        this.buildingPlan = res.data
      })
    },
    /**
     * 平面单元点击事件处理
     * @param data
     */
    buildingCellClickHandler(data) {
      if (data.isBe) {
        return this.getBePlane(data)
      }
      const objectId = data.objectId
      if (!objectId) {
        return
      }

      this.$router.push({
        path: '/statement/CheckList',
        query: {
          buildingId: this.buildingId,
          checktableId: data.checkTableId,
          objectId: data.objectId
        }})
    },
    /**
     * 获取工序数据
     * @param buildingId 楼栋ID
     */
    queryProcess(buildingId) {
      const selected = this.processSelected
      getSpecialType({ buildingId: buildingId, old: true }).then(res => {
        if (res.code === 200) {
          const data = []
          const processIds = []
          res.data.forEach(item => {
            const children = item.children
            data.push(...children)
            for (const child of children) {
              processIds.push(...child.children.map(item => item.value))
            }
          })
          this.processData = data
          this.processData.sort((a, b) => a.seq - b.seq)
          if (selected.length > 0) {
            this.processSelected = selected.filter(item => processIds.includes(item[item.length - 1]))
          }
        }
      })
    },
    /**
     * 工序改变处理
     */
    processChangeHandle(value) {
      console.log(value)
    },
    /**
     * 根据选择工序查询数据
     */
    queryContentDataBySelectProcess() {
      const processIds = []
      this.processSelected.forEach(item => {
        processIds.push(item[item.length - 1])
      })
      this.getContentData(this.buildingId, processIds)
    },
    /**
     * 重置选择工序
     */
    resetSelectProcess() {
      this.processSelected = []
      this.getContentData(this.buildingId)
    },
    roleLegendClickHandle(roleCode) {
      this.activeRoleCode = this.activeRoleCode === roleCode ? '' : roleCode
      // const processIds = []
      // this.processSelected.forEach(item => {
      //   processIds.push(item[item.length - 1])
      // })
      // this.getContentData(this.buildingId, processIds, this.activeRoleCode)
    },
    /**
     * 关闭窗口
     */
    dialogClose() {
      this.detailDialogVisible = false
      this.detailForm = {}
    },
    /**
     * 关闭窗口
     */
    showDetailDialog(data) {
      this.detailDialogVisible = true
      this.detailForm = {
        checkTypeName: data.checkTypeName,
        checkTableName: data.checkTableName,
        tableData: data.ratio,
        unit: this.getChnUnitType(data.unitType)
      }
    },
    getChnUnitType(unitType) {
      switch (unitType) {
        case 1: return '层'
        case 2: return '户'
        case 3: return '栋'
        case 4: return '个'
        case 5: return '处'
        case 6: return '批'
        default: return ''
      }
    },
    /* 获取基础工程具体验收情况 */
    getBePlane(data) {
      this.beState.loading = true
      this.beState.activeRoleCode = null
      this.beState.checkTable = null
      this.beState.pageNum = 1
      this.beState.pageSize = 40
      this.beState.plans = []
      this.beState.activeCheckState = null
      this.beState.paramData = JSON.parse(JSON.stringify(data))
      getBuildingBeState({ buildingId: data.objectId, checkTableId: data.checkTableId }).then(response => {
        if (response.code === 200) {
          this.dealPlaneData(response)
        }
      }).finally(() => {
        this.beState.loading = false
      })
    },
    /* 切换角色 */
    changeRole(roleKey) {
      this.beState.activeRoleCode = this.beState.activeRoleCode === roleKey ? undefined : roleKey
    },
    dealPlaneData(response) {
      if (response.code === 200) {
        const data = response.data
        this.beState.checkTable = data.checkTable
        this.beState.content = data.content
        this.beState.plans = data.planList
        this.beState.visible = true
        this.changeCheckState(this.beState.activeCheckState, 1)
        this.handlePileChange(1)
      }
    },
    /* 根据验收状态获取列表 */
    changeCheckState(state, force) {
      this.beState.activeCheckState = this.beState.activeCheckState === state ? undefined : state
      this.beState.pageNum = 1
    },
    /* 切换桩基验收情况 */
    handleChangePileState(state, force) {
      // 如果状态为空
      if (state === null) {
        this.beState.pileArr = JSON.parse(JSON.stringify(this.beState.allPileArr))
      } else if (force && force === 1) {
        this.beState.pileArr = this.beState.allPileArr.filter(item => item.status === state)
      } else if (state === this.beState.activeCheckState) {
        this.beState.activeCheckState = null
        this.beState.pileArr = JSON.parse(JSON.stringify(this.beState.allPileArr))
      } else {
        // 有状态
        this.beState.pileArr = this.beState.allPileArr.filter(item => item.status === state)
        this.beState.activeCheckState = state
      }
      this.handlePileChange(1)
    },
    /* 处理公区数据 */
    dealPublicData(publicList) {
      var result = {}
      if (Array.isArray(publicList) && publicList.length) {
        for (var publicItem of publicList) {
          if (result[publicItem.fileId]) {
            result[publicItem.fileId].push({ sourceId: publicItem.id, status: publicItem.status, points: JSON.parse(publicItem.drawArea) })
          } else {
            result[publicItem.fileId] = [{ sourceId: publicItem.id, status: publicItem.status, points: JSON.parse(publicItem.drawArea) }]
          }
        }
      }
      if (JSON.stringify(result) !== '{}') {
        const resultArr = []
        for (var key in result) {
          resultArr.push({ fileId: parseInt(key), lineArr: result[key] })
        }
        return resultArr
      } else {
        return []
      }
    },
    /* 事件回调函数 */
    getInspectDetail(data) {
      this.beState.visible = false
      this.$router.push({
        path: '/statement/CheckList',
        query: {
          buildingId: this.buildingId,
          checktableId: this.beState.checkTable.fid,
          objectId: data.objectId,
          batch: data.batch
        }})
    },
    /* 桩基分页 */
    handlePileChange(val) {
      if (val <= 0) return
      let arr = this.beState.content
      const activeCheckState = this.beState.activeCheckState
      if (activeCheckState !== undefined) {
        const activeRoleCode = this.beState.activeRoleCode
        arr = arr.filter(item => activeCheckState === (activeRoleCode ? item.roleResult[activeRoleCode] || 0 : item.status))
      }
      if (arr < this.beState.pageSize) {
        this.beState.pagePileArr = arr
      } else {
        const startNum = (val - 1) * this.beState.pageSize
        const endNum = val * this.beState.pageSize
        this.beState.pagePileArr = arr.slice(startNum, endNum)
      }
    },
    /* 点击放大图片 */
    showBigPic(fileId) {
      var picList = []
      this.beState.plans.forEach(item => {
        picList.push(this.basePicUrl + item.fileId)
      })
      return picList
    }
  }
}
</script>

<style scoped lang="scss">
.customDialogClass {

}
.container-table {
  font-size: 14px;
  width: calc(100% - 32px);
  margin: 10px 16px 0;
  display: table;
  .table-row {
    display: table-row;
    height: 30px;
    .table-cell {
      display: table-cell;
      margin: 0 5px;
      text-align: center;
      line-height: 30px;
    }
  }
  .ratio-role-name {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #64aeec;
    color: #fff;
    font-size: 8px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
  .container {
    height: 100%;
    .tool-bar {
      display: flex;
      align-items: center
    }
    .selectProcessPlane {
      .el-cascader-menu__wrap {
        height: 500px;
      }
    }
    .data-container {
      height: calc(100% - 50px);
      .building-info {
        display: flex;
        align-items: center;
        .building-info-field {
          text-align: center;
          .field-title {
          }
          .field-value {
            margin-left: 20px
          }
        }
      }

    }
  }
.building-content {
  height: calc(100% - 60px);
  border-top: 1px solid #C0C4CC;
  overflow: hidden;
  .legend {
    display: flex;
    justify-content: center;
    font-size: 14px;
    .legend-block {
      width: 14px;
      height: 14px;
      line-height: 14px;
      border-radius: 2px;
      margin: 5px;
      color: #FFFFFF;
      font-size: 12px;
      text-align: center;
    }
    .legend-label {
      display: flex;
      align-items: center;
    }
    .active-legend {
      background: #64aeec;
      color: #FFFFFF;
      border-radius: 5px;
    }
  }
  .building-content-plane {
    height: calc(100% - 70px);
    padding: 0 10px 10px;
    .plane-left {
      background-color: #FFF;
      padding: 0;
      margin: 0;
      flex: 0 0 80px;
      .plane-left-top {
      }
      .plane-left-middle {
        padding: 0;
      }
      .plane-left-bottom {
        background-color: #00adff;
      }
      .left-row {
        width: 100%;
        color: #666;
        font-size: 14px;
        display: inline-flex;
        justify-items: center;
        align-items: center;
        height: 30px;
        justify-content: center;
        .role-sign {
          width: 16px;
          height: 16px;
          border-radius: 3px;
          background: #64aeec;
          color: #fff;
          font-size: 8px;
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .floor-left {
          text-align: center;
          color: #666;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          width: 55px;
        }
        .floor-right {
          border-top: 1px solid #666;
          border-left: 1px solid #666;
          width: 5px;
          height: 32px;
        }
        .left-row:last-child .floor-right {
          border-bottom: 1px solid #666;
        }
      }
    }
    .plane-right {
      padding: 0;
      display: flex;
      .plane-right-column {
        .right-column-cell {
          height: 30px;
          margin: 0 2px;
          .progress-bar {
            height: 18px;
            border-radius: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            margin: 2px 0;
            position: relative;
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
            flex: 1;
            overflow: hidden;
            .progress-bar-line {
              color: #525252;
              background-color: #80c9b5;
              font-size: 14px;
            }
            .progress-placeholder {
              position: absolute;
              width: 100%;
              height: 100%;
              color: #666;
              text-align: center;
              font-size: 14px;
            }
          }
        }
        .right-column-label {
          font-size: 14px;
          text-align: center;
        }
      }
      .plane-right-top {
        padding: 0;
      }
      .plane-right-middle {
        padding: 0;

      }
      .plane-right-bottom {
        background-color: #00adff;
      }
      .right-column {
        display: inline-block;
        .right-column-cell {
          height: 30px;
          .progress-bar {
            height: 18px;
            border-radius: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            margin: 2px 0;
            position: relative;
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
            flex: 1;
            overflow: hidden;
            .progress-bar-line {
              color: #525252;
              background-color: #80c9b5;
              font-size: 14px;
            }
            .progress-placeholder {
              position: absolute;
              width: 100%;
              height: 100%;
              color: #666;
              text-align: center;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
  .content-left{
    justify-content: left !important;
  }
  .pile-item{
    height: 45px;
    text-align: center;
    position: relative;
    padding: 0 5px;
    cursor: pointer;
    border: 1px solid #fff;
    span {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 14px;
      line-height: 28px;
      color: #fff;
    }
    em {
      display: block;
      position: absolute;
      left: 5px;
      bottom: 2px;
      font-size: 12px;
      line-height: 12px;
      height: 12px;
      color: #fff;
    }
  }
  .pile-item:hover {
    border-color: #1ab394;
  }
  .pile-img{
    width: 100%;
    height: 100%;
  }
.wall-plane {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .wall-plane-main {
    display: flex;
    border-bottom: 1px solid #ccc;
    .plane-content-block {
      width: 25%;
      display: flex;
      align-items: flex-end;
      .block-wrapper {
        width: 100%;
        position: relative;
        .block-item {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF;
          height: 20px;
          width: calc(100% - 10px);
          margin: 2px 5px;
          border-radius: 3px;
          cursor: pointer;
        }
      }
    }
  }
  .wall-plane-bottom {
    height: 40px;
    display: flex;
    .plane-item-label {
      flex:  0 0 25%;
      line-height: 40px;
      text-align: center;
      color: #666;
    }
  }
}
</style>
